import { defineStore, acceptHMRUpdate } from 'pinia';
import { computed, ref } from 'vue';

interface Layer {
    id: string;
    name: string;
    visible: boolean;
    raw?: any;
}

export const useLayerStore = defineStore(
    'layer',
    () => {
        const layers = ref<Layer[]>([]);

        function addLayer(layer: Layer) {
            if (!layers.value.find((l) => l.name === layer.name)) {
                layers.value.push(layer);
            }
        }

        const setLayers = (newLayers: Layer[]) => {
            layers.value = newLayers;
        };

        const getLayers = (): Layer[] => {
            return layers.value;
        };

        function clearLayers() {
            layers.value = [];
        }

        // ✅ 计算属性：可见图层名称
        //从原始状态中派生新数据，并返回一个只读的响应式值  状态格式转换或过滤 状态的合并或聚合
        // const visibleLayerNames = computed(() => layers.value.filter((layer) => layer.visible).map((layer) => layer.name));

        return {
            layers,
            addLayer,
            getLayers,
            clearLayers
            // visibleLayerNames // 暴露计算属性
        };
    },
    {
        // 开启持久化
        persist: true
    }
);
if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useLayerStore, import.meta.hot));
}
